<template>
    <div>
        <h2 class="tt">请选择支付方式</h2>
        <div class="m-payMethodPicker">
            <ul class="m-list list">
                <van-radio-group v-model="checked">
                    <van-radio name="1"><i class="u-icon u-icon-alipay icon"></i> <span class="text">支付宝</span></van-radio>
                    <van-radio name="2"> <i class="u-icon u-icon-alipay icon wx"></i><span
                            class="text">微信支付</span></van-radio>
                </van-radio-group>
            </ul>
        </div>
        <van-button class="w-bottomBlockBtn w-button w-button-xxl w-button-block w-button-noRadius"
            color="linear-gradient(to right, #ff6034, #ee0a24)" block @click="handpay">确定</van-button>
        <!-- <van-dialog v-model:show="show"></van-dialog> -->
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
    name: 'Pay',
})
</script>

<script lang="ts" setup>
import { showDialog, showToast ,closeDialog} from 'vant';
import QRCode from 'qrcode'
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { paymentId, ReqPayStatus } from '@/api/pay/index'
const route = useRoute()
const router = useRouter()
const checked = ref('1');
const pay = ref()
// const show = ref(false)
const getOrderId = async () => {
    let { orderId } = route.query
    try {
        let res = await paymentId(orderId as string)
        // console.log(res);
        pay.value = res
    } catch (error) {
        console.log('获取订单支付信息失败');
    }
}

const handpay = async () => {

    try {
        // show.value = true
        let imgUrl = await QRCode.toDataURL(pay.value.codeUrl)
        let htmlStr = ` <img src="${imgUrl}" style="width:200px;" /> `
        showDialog({
            title: "请立即支付",
            showCancelButton: true,
            message: htmlStr,
            allowHtml: true,
            confirmButtonText: '已完成支付',
            cancelButtonText: '支付遇到问题',
        }).then(async () => {
            let res = await ReqPayStatus(pay.value.orderId);
            if (res) {
                clearInterval(intervalId)
                closeDialog()
                showToast('您的订单并未支付成功，点击【立即支付】重新支付！')
            } else {
                clearInterval(intervalId)
                closeDialog()
                showToast('订单支付成功')
                router.replace({
                    path: '/home',
                });
            }

        }).catch(() => {
            clearInterval(intervalId)
            closeDialog()
            showToast('若支付遇到问题，请联系客服处理!')
        })
        let intervalId = setInterval(async () => {
            // let res = await ReqPayStatus(pay.value.orderId);
            let res = await ReqPayStatus(pay.value.orderId);
            if (!res) {
                clearInterval(intervalId);
                closeDialog()
                showToast('订单支付成功')
                router.replace({
                    path: '/home',
                });
            }
        }, 1000);


    } catch (error) {
        closeDialog()
        showToast({
            type: 'fail',
            message: '支付二维码失效，请联系管理员'
        })
    }
}

onMounted(() => {
    getOrderId()
})

</script>

<style scoped>
.tt {
    padding-left: 0.4rem;
    margin-top: 0.26667rem;
    margin-bottom: 0.26667rem;
    line-height: 1;
    font-size: .32rem;
    color: #999;
}




.m-payMethodPicker>.list .payMethod .icon {
    margin-right: 0.13333rem;
}

.u-icon-alipay {
    width: 50px;
    height: 0.72rem;
    background-position: 0 0;
}

.u-icon-alipay,
.u-icon-applepay {
    display: inline-block;
    vertical-align: middle;
    background-image: url(//yanxuan-static.nosdn.127.net/hxm/yanxuan-cashier/p/20161201/style/img/wap/payMethod-sa3669d3f8a-d330a55e6f.png);
    background-repeat: no-repeat;
    background-size: 5.70667rem 6.69333rem;
}

.text {
    font-size: 18px;
    font-weight: 700;
}

.m-payMethodPicker>.list {
    padding-left: 20px;
}

/* 重复 */
.m-payMethodPicker>.list .payMethod {
    position: absolute;
    left: -0.89333rem;
    top: 0;
    bottom: 0;
    margin: auto;
    background-position: 0 0;
}

.m-payMethodPicker>.list .payMethod .icon {
    margin-right: 0.13333rem;
}

.wx {
    background-position: 0 -192px;
}

.u-icon-doulipay,
.u-icon-epay,
.u-icon-largepay,
.u-icon-weixin,
.u-icon-wxpay,
.u-icon-yxpay {
    display: inline-block;
    background-image: url(//yanxuan-static.nosdn.127.net/hxm/yanxuan-cashier/p/20161201/style/img/wap/payMethod-sa3669d3f8a-d330a55e6f.png);
    background-repeat: no-repeat;
    background-size: 5.70667rem 6.69333rem;
    width: 0.72rem;
    height: 0.72rem;
    vertical-align: middle;
}

.w-bottomBlockBtn,
.w-bottomBlockBtn:focus,
.w-bottomBlockBtn:visited {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 4;
    width: 100%;
    height: 8%;
}
</style>